<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="editor">
        <title>Overview | Kendo UI Editor</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to initialize and configure the Kendo UI Editor widget.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/editors/editor/overview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/editors/editor/overview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="editor-overview"><a href="#editor-overview">Editor Overview</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/editor/index">Kendo UI Editor widget</a> allows you to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface.</p>

<p>The generated widget value is an <code>XHTML</code> markup.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<h3 id="initialize-the-editor"><a href="#initialize-the-editor">Initialize the Editor</a></h3>

<p>To initialize the Editor, use an existing <code>HTML</code> element and a jQuery selector.</p>

<h6>Example</h6>

<pre><code>  &lt;textarea id="editor" rows="10" cols="30"&gt;&lt;/textarea&gt;

  $(document).ready(function(){
      $("#editor").kendoEditor();
  });
</code></pre>

<h2 id="modes"><a href="#modes">Modes</a></h2>

<p>Depending on the element from which the Editor is created, it assumes 2 mode types:</p>

<ul>
<li>The <a href="#classic-mode">classic mode type</a>.</li>
<li>The <a href="#inline-mode">inline mode type</a>.</li>
</ul>

<h3 id="classic-mode"><a href="#classic-mode">Classic Mode</a></h3>

<p>If you initialize the Editor from a <code>&lt;textarea&gt;</code> element, it assumes its classic mode. The <code>textarea</code> is not visible and is used to hold the value of the widget. You can type in the <code>contenteditable iframe</code> that is created. In the past, <code>iframes</code> used to be the only element that allowed for the content to be editable in most browsers.</p>

<p>The classic Editor posts its value automatically because it is based on a <code>form</code> element. The tools of the Editor are always visible. Its content does not reside on the main web page and the styling of the page does not influence the editable content. To apply custom styles to the editable content, <a href="/api/javascript/ui/editor#configuration-stylesheets">inject them through the configuration of the Editor</a>.</p>

<p><a href="http://demos.telerik.com/kendo-ui/web/editor/index.html">Demo of the Classic Mode Editor</a></p>

<h3 id="inline-mode"><a href="#inline-mode">Inline Mode</a></h3>

<p>If you initialize the Editor from a <code>&lt;div&gt;</code>, it assumes its inline mode. The originating element is made content-editable and is used by the widget to return its value.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>While it is possible to initialize an inline Editor from a non-<code>div</code> element, such as <code>p</code> or <code>h1</code>, it is strongly recommended that you use the <code>&lt;div&gt;</code> one. Do not use <code>&lt;table&gt;</code> elements for creating inline Editors because of Internet Explorer browser limitations.</p>
</blockquote>

<p>The inline Editor does not post its value. Posting the value of an inline Editor is a matter that <a href="/controls/editors/editor/troubleshoot/troubleshooting">you need to take care of</a>. The tools of the Editor are only visible when the widget is focused. Its content resides on the main web page and the styling of the page influences the editable content.</p>

<p><a href="http://demos.telerik.com/kendo-ui/web/editor/inline-editing.html">Demo of the Inline Mode Editor</a></p>

<blockquote>
<p><strong>Important</strong>  </p>

<p>Because of the limited <code>iframe</code> support provided by the iOS Safari browser, it is recommended to use the inline Editor mode on iOS devices.</p>
</blockquote>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<p>To configure the Editor tools, use the <a href="/api/web/editor#tools"><code>tools</code></a> configuration option.</p>

<h3 id="configuration-Define"><a href="#configuration-Define">Define Sets of Editor Tools</a></h3>

<p>If you do not define a set of specific tools, the Editor creates a set of default tools for text formatting.</p>

<p>The following example demonstrates how to implement a set of specific Editor tools.</p>

<h6>Example</h6>

<pre><code>   $(document).ready(function(){
      $("#editor").kendoEditor({
         tools: [
             "bold",
             "italic",
             "underline",
             "foreColor"
         ]
      });
  });
</code></pre>

<h3 id="configuration-Specify"><a href="#configuration-Specify">Specify Custom Tools</a></h3>

<p>Apart from the available built-in tools, the Editor functionality can be extended through custom tools that are defined in the <code>tools</code> array.</p>

<p>The following example demonstrates how to add a custom tool button. To allow styling where <code>toolName</code> is the name specified in the custom tool configuration, the custom buttons get a <code>k-toolName</code> CSS class. The <code>undo</code> and <code>redo</code> tool names are reserved.</p>

<h6>Example</h6>

<pre><code>   $("#editor").kendoEditor({
       tools: [
           {
               name: "toolName",
               tooltip: "Custom editor tool",
               exec: function(e) {
                   var editor = $(this).data("kendoEditor");

                   // execute command
               }
           }
       ]
   });
</code></pre>

<h3 id="configuration-Apply"><a href="#configuration-Apply">Apply Read-Only Functionalities</a></h3>

<p>To make the Editor read-only, remove the <code>contenteditable</code> attribute of the <a href="/api/javascript/ui/editor#fields-body"><code>body</code></a> element. While the Editor is read-only, the hyperlinks in its content become active and clicking on them navigates the page. To avoid this behavior, prevent the hyperlink clicks.</p>

<p>The following example demonstrates how to apply a read-only functionality to the Editor.</p>

<h6>Example</h6>

<pre><code>var editor = $("#editor").data("kendoEditor"),
    editorBody = $(editor.body);

// make readonly
editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);

// make editable
editorBody.attr("contenteditable", true).find("a").off("click.readonly");
</code></pre>

<h2 id="display"><a href="#display">Display</a></h2>

<p>The Editor provides options for configuring its appearance, such as its size.</p>

<h3 id="size"><a href="#size">Size</a></h3>

<p>Prior to the Q3 2012 (2012.3.1114) release, the Editor assumed the pixel offset width of the <code>&lt;textarea&gt;</code> from which it was created.</p>

<p>The current behavior of the widget is as follows:</p>

<ul>
<li>If a width or a height value is set through an inline style in the <code>&lt;textarea&gt;</code> element, the Editor applies it.</li>
<li>If the <code>&lt;textarea&gt;</code> does not display such explicit values, the Editor applies a 100% width dimension and a default height of 250px.</li>
</ul>

<p>If the <code>&lt;textarea&gt;</code> width and height are applied through external CSS styles, use a similar approach to the Editor—for example, by using its <code>k-editor</code> CSS class.</p>

<p>The <code>&lt;textarea&gt;</code>, <code>cols</code>, and <code>rows</code> attributes are required. They can influence the dimensions of a <code>&lt;textarea&gt;</code> element as well. However, browsers do not apply them in a consistent manner and the Editor ignores them when its size is rendered.</p>

<p>When using the classic (iFrame) mode, the Editor does not assume a very small height because it needs some minimum reasonable space for its toolbar and editable areas. The default widget height is 250px.</p>

<p>To set a height that is smaller than 200px, use the approach demonstrated in the following example.</p>

<h6>Example</h6>

<pre data-lang="html"><code>&lt;style&gt;

    table.small-editor
    {
        height: 100px;
    }

    table.small-editor iframe.k-content
    {
        height: 50px; /* 50px less than the Editor height */
    }

&lt;/style&gt;

&lt;p&gt;Smallest possible height for the classic Editor is 100px:&lt;/p&gt;

&lt;textarea cols="20" rows="3" class="small-editor" name="classicEditor" id="classicEditor"&gt;&amp;lt;Editor content&amp;gt;&lt;/textarea&gt;

&lt;p&gt;The smallest reasonable height for the inline Editor is 2em:&lt;/p&gt;

&lt;div id="inlineEditor" style="height:2em;"&gt;&lt;p&gt;Editor content&lt;/p&gt;&lt;/div&gt;

&lt;script&gt;

    $(function () {
        // initialize the classic Editor
        $("#classicEditor").kendoEditor();
        // apply custom sizing
        $("textarea.small-editor").closest("table.k-editor").addClass("small-editor");

        // initialize the inline Editor
        $("#inlineEditor").kendoEditor();
    });

&lt;/script&gt;
</code></pre>

<p>To set a height that is smaller than 100px, use the <a href="#inline-mode">inline mode</a> of the Editor.</p>

<p>When using the MVC wrapper of the Editor, apply the CSS class through <code>.HtmlAttributes()</code>.</p>

<h3 id="default-content-styling"><a href="#default-content-styling">Default Content Styling</a></h3>

<p>When the <a href="#classic-mode">classic mode</a> is enabled, the Editor uses an <code>iframe</code> and applies some default CSS styles to its content. This behavior overrides the default browser styling that are shown in the following example and that target mainly headings, paragraphs, links, lists, and tables. All tables inside the Editor obtain a <code>k-table</code> class, which is not included in the value of the widget.</p>

<h6>Example</h6>

<pre><code>html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  font-size: 12px;
  font-family: Verdana,Geneva,sans-serif;
  margin-top: -1px;
  padding: 1px .2em 0;
  word-wrap: break-word;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.16em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: .83em;
}

h6 {
  font-size: .7em;
}

p {
  margin: 0 0 1em;
}

ul, ol {
  padding-left: 2.5em;
}

a {
  color: #00a;
}

code {
  font-size: 1.23em;
}

.k-table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
  margin: 0 0 1em;
}

.k-table td {
  min-width: 1px;
  padding: .2em .3em;
}

.k-table,
.k-table td {
  outline: 0;
  border: 1px dotted #ccc;
}

.k-table p {
  margin: 0;
  padding: 0;
}
</code></pre>

<p>To avoid the default content styles demonstrated in the previous example, remove or override them after the Editor is initialized by executing the following code.</p>

<pre><code>var editor = $("#EditorID").data("kendoEditor");
var styleTag = editor.body.parentNode.getElementsByTagName("style")[0];
styleTag.parentNode.removeChild(styleTag);
</code></pre>

<p>You can also use custom styles with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">higher specificity</a> selectors and inject those custom styles in an <a href="http://demos.telerik.com/kendo-ui/editor/styles">Editor stylesheet</a>. In such cases, you do not have to customize the Formatting tool of the Editor.</p>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on the Kendo UI Editor:</p>

<ul>
<li><a href="/api/javascript/ui/editor">Editor JavaScript API Reference</a></li>
<li><a href="/controls/editors/editor/imagebrowser">Image Browser</a></li>
<li><a href="/controls/editors/editor/post-process">Post-Process Content</a></li>
<li><a href="/controls/editors/editor/working-with-selection">Set Selections</a></li>
<li><a href="/controls/editors/editor/preventing-xss">Prevent Cross-Site Scripting</a></li>
<li><a href="/controls/editors/editor/pasting">Pasting</a></li>
<li><a href="/controls/editors/editor/troubleshoot/troubleshooting">Troubleshooting</a></li>
<li><a href="/aspnet-mvc/helpers/editor/overview">Overview of the ASP.NET MVC HtmlHelper Extension of the Editor Widget</a></li>
<li><a href="/jsp/tags/editor/overview">Overview of the Editor JSP Tag</a></li>
<li><a href="/php/widgets/editor/overview">Overview of the Editor PHP Class</a></li>
</ul>

<p>For how-to examples on the Kendo UI Editor widget, browse its <a href="/controls/editors/editor/how-to/AngularJS/handle-blur-and-focus-events-angular"><strong>How To</strong> documentation folder</a>.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

